<template>
  <div class="wrap">
    <div class="box">
      <el-form class="goods" label-width="80px">
        <el-form-item label="商品名称：">
          <el-input v-model="goods.name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格：">
          <el-input v-model="goods.price"></el-input>
        </el-form-item>
        <el-form-item label="商品库存：">
          <el-input v-model="goods.num"></el-input>
        </el-form-item>
        <el-form-item label="商品类型：">
          <el-select v-model="typesValue" placeholder="请选择商品类型：">
            <el-option
              v-for="item in goodstypes"
              :key="item.type_name"
              :label="item.type_name"
              :value="item._id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品简介：">
          <el-input type="textarea" v-model="goods.details"></el-input>
        </el-form-item>

        <div class="upload">
          <el-form-item label="列表图片：">
            <el-upload
              class="upload-demo"
              action="/goods/uploadImages"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-progress="handleProgress"
              :on-success="handleSuccess"
              :file-list="fileListImg"
              list-type="picture"
              :multiple="ismultple"
            >
              <el-button size="small" type="primary">点击重新更改图片</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <!-- <el-upload
              class="avatar-uploader"
              action="/goodsFiles/upload"
              :show-file-list="false"
              :on-success="listHandleAvatarSuccess"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>-->
          </el-form-item>

          <el-form-item label="详情图片：">
            <!-- <el-upload
              class="upload-demo"
              action="/goodsFiles/upload"
              :on-change="handleChange"
              :file-list="fileList"
              :on-success="detailsHandleAvatarSuccess"
            >
              <el-button class="upBtn" size="small" type="success">点击上传</el-button>
            
            </el-upload>-->
            <el-upload
              class="upload-demo"
              action="/goods/uploadImages"
              :on-preview="handlePreviewdetail"
              :on-remove="handleRemovedetail"
              :on-progress="handleProgressdetail"
              :on-success="handleSuccessdetail"
              :file-list="fileDetailImg"
              list-type="picture"
              :multiple="ismultple"
            >
              <el-button size="small" type="primary">点击重新更改图片</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="warning" @click="updateOne(goods)">立即修改</el-button>
          <el-button @click="$router.go(-1)">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Axios from "axios";
import { createNamespacedHelpers } from "vuex";
import { log } from "util";
const {
  mapState,
  mapActions,
  mapMutations,
  mapGetters
} = createNamespacedHelpers("goodsStore");
export default {
  // props: ["_id"],
  data() {
    return {
      _id: "",
      isupload: true,
      typesValue: "",
      ismultple: true,
      goods: {
        name: "",
        price: "",
        num: "",
        details: "",
        typesId: "",
        listImage: [],
        detailImage: []
      },
      // 真正的路径
      goodsreal: {},

      imageUrl: "",
      fileListImg: [],
      fileDetailImg: [],
      NewDetailImage: [],
      NewListImage: [],
      // 上传图片
      delListImg: [],
      delDetailImg: [],

      // 加载
      fullscreenLoading: false
    };
  },
  mounted() {
    this.getOne();
    this.getTypesAsync();
  },
  watch: {
    typesValue() {
      this.goods.typesId = this.typesValue;
    }
  },
  computed: {
    //获取所有商品类型
    ...mapState(["goodstypes"])
  },
  methods: {
    //获取所有商品类型
    ...mapActions(["getTypesAsync"]),
    // //上传列表图片
    // listHandleAvatarSuccess(res, file) {
    //   this.imageUrl = URL.createObjectURL(file.raw);
    //   this.goods.listImage = res.file.map(item => item.path.substring(18))[0];
    // },
    // //上传详情图片
    // handleChange(file, fileList) {
    //   this.fileList = fileList.slice(-10);
    // },
    // detailsHandleAvatarSuccess(res, file){
    //   this.NewDetailImage.push(
    //     res.file[0].path.substring(18)
    //   );
    // },
    // 上传图片方法
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.delListImg.push(file.name);
      this.delListImg = [...this.delListImg];
      //  this.goodsreal.listImage.
      for (var i in this.goodsreal.listImage) {
        if (file.name == this.goodsreal.listImage[i]) {
          this.goodsreal.listImage.splice(i, 1);
        }
      }
      console.log(this.delListImg);
      // console.log(  this.goodsreal.listImage);
    },
    handlePictureCardPreview(file) {
      console.log(file.url);

      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleProgress() {
      // console.log(this.isupload);

      this.isupload = false;
    },

    // handleDownload(file) {
    //   console.log(file);
    // },
    handleSuccess(response, file, fileList) {
      // console.log(response, file, fileList);
      // console.log(response);

      var imgdata = response.filename;
      this.NewListImage.push(imgdata);
    },
    handlePreview(file) {
      console.log(file);
    },

    // 详情图片
    handleRemovedetail(file, fileList) {
      console.log(file, fileList);

      this.delDetailImg.push(file.name);
      this.delDetailImg = [...this.delDetailImg];
      console.log(this.delDetailImg);
      for (var i in this.goodsreal.detailImage) {
        if (file.name == this.goodsreal.detailImage[i]) {
          this.goodsreal.detailImage.splice(i, 1);
        }
      }
      // console.log( this.goodsreal.detailImage);
    },

    handlePreviewdetail(file) {
      console.log(file);
    },
    handlePictureCardPreviewdetail(file) {
      console.log(file.url);

      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleProgressdetail(file) {
      // console.log(this.isupload);

      this.isupload = false;
    },

    handleSuccessdetail(response, file, fileList) {
      console.log(response, file, fileList);
      // var imgdata = this.getFileName(response.file[0].path);
      var imgdata = response.filename;
      //   console.log(imgdata);
      this.dialogImageUrl = imgdata;
      this.NewDetailImage.push(imgdata);
    },

    //获取当前修改的商品
    getOne() {
      // console.log(this.$route.params._id);
      this._id = this.$route.params._id;

      Axios.get("goods/getOne", {
        params: { _id: this.$route.params._id }
      }).then(res => {
        console.log(res);
        this.goods = res.data[0];
        this.goodsreal = res.data[0];
        this.typesValue = this.goods.typesId;

        this.fileListImg = this.goods.listImage.map(item => {
          item = { name: item, url: "http://localhost:8000/files/" + item };
          // this.fileListImg.push(item);
          return item;
        });
        this.fileDetailImg = this.goods.detailImage.map(item => {
          item = { name: item, url: "http://localhost:8000/files/" + item };
          // this.fileDetailImg.push(item);
          return item;
        });

        // this.fileListImg

        this.goods = { ...this.goods };
      });
      //     updatedata(newval, oldval) {
      // console.log(newval, oldval, 23131);
      // this.ruleForm = new Object(newval[0]);
      // console.log(12321412, this.ruleForm);
      // // d.imgs = "http://localhost:3000/files/" + d.imgs;
      // // d.value = d.value - 0;
      // this.isimg= this.ruleForm.imgs
      // this.ruleForm.imgs = "http://localhost:3000/files/" + this.ruleForm.imgs;
      // this.ruleForm.value = this.ruleForm.value - 0;
    },

    //确认修改
    updateOne() {
      Axios.post("/goods/updateOne", {
        ...this.goods,
        listImage: [...this.NewListImage, ...this.goodsreal.listImage],
        detailImage: [...this.NewDetailImage, ...this.goodsreal.detailImage],
      
        delDetailImg: this.delDetailImg,
        delListImg: this.delListImg,

      }).then(res => {
        console.log(res.data);
        //删除files里面的文件
        // console.log(123213213, this.delDetailImg, this.delListImg);
        this.$message({
          message: "恭喜你，修改成功",
          type: "success"
        });
        setTimeout(() => {
          this.$router.push("/merchant/goodslist");
        }, 1000);
        // Axios.post("/goods/deleteImages", {
          // delDetailImg: this.delDetailImg,
          // delListImg: this.delListImg
        // }).then(res => {
        //   this.$message({
        //     message: "恭喜你，修改成功",
        //     type: "success"
        //   });
        //   setTimeout(() => {
        //     this.$router.push("/merchant/goodslist");
        //   }, 500);
        // });
      });
    }
  }
};
</script>

<style  scope>
.upload {
  display: flex;
}
.wrap {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  display: flex;
}
.form {
  text-align: left;
}
.el-upload__input {
  display: none !important;
}
.el-form-item__label {
  width: 100px !important;
}
.el-form-item__content {
  margin-left: 100px !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>